{% extends "award_base.html" %}
{% load i18n %}
{% block head %}
    <title>{% trans "蓝鲸开发框架" %}</title>
    {{ block.super }}
    <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/select2-3.5.2/select2.css" rel="stylesheet">
{% endblock %}


{% block content %}
    <div class="page-content" style="min-width:80%;">
        <ol class="breadcrumb detail-breadcrumb">
            <li class="all pro-all"><span href="#index?catalogue=all&amp;tag=all">系统管理</span></li>
            <li><span href="{{ SITE_URL }}award">奖项信息</span></li>
        </ol>
        <div class="bk-panel bk-demo">
            <div class="bk-panel-header">
                <div class="bk-form bk-inline-form">
                    <div class="bk-form-item">
                        <label class="bk-label">申报奖项：</label>
                        <div class="bk-form-content">
                            <input type="text" class="bk-form-input" id="search_award_name" name="search_award_name"
                                   placeholder="请输入关键字"
                                   style="width:150px;">
                        </div>
                    </div>

                    <div class="bk-form-item">
                        <label class="bk-label">所属组织：</label>
                        <div class="bk-form-content">
                            <input type="text" class="bk-form-input" id="search_org_name" name="search_org_name"
                                   placeholder="请输入关键字"
                                   style="width:150px;">
                        </div>
                    </div>
                    <div class="bk-form-item">
                        <label class="bk-label">状态：</label>
                        <div class="bk-form-content">
                            <select name="" id="search_status" class="bk-form-select" style="width:150px;">
                                <option value=-1>不限</option>
                                <option value=1>开启</option>
                                <option value=0>结束</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="bk-form bk-inline-form">
                    <div class="bk-form-item">
                        <label class="bk-label">申报时间：</label>
                        <div class="bk-form-content">
                            <input type="text" class="bk-form-input" id="search_apply_time"
                                   placeholder="选择日期...">
                        </div>
                    </div>
                    <div class="bk-form-item">
                        <div class="bk-form-content">
                            <button class="bk-button bk-primary" onclick="resetSearch()" title="重置">重置</button>
                            <button class="bk-button bk-primary" onclick="search()" title="查询">查询</button>
                        </div>
                    </div>
                </div>
                <div class="bk-panel-action">
                    <a href="#mymodal" class="bk-button bk-primary" data-toggle="modal" data-target="#myModal">新增</a>
                    <a onclick="batchCopy()" class="bk-button bk-primary">批量克隆</a>
                </div>
            </div>
            <div class="bk-panel-body p0">
                <table id="award" class="bk-table table-bordered">
                    <thead>
                    <tr>
                        <th>所属组织</th>
                        <th>奖项级别</th>
                        <th>申报奖项</th>
                        <th>状态</th>
                        <th>开始时间</th>
                        <th>结束时间</th>
                        <th>申报人数</th>
                        <th>获奖人数</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
    <!-- 新增and编辑( Modal )  -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"
         data-backdrop="static">
        <div class="modal-dialog" style="width: 1000px;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="myModalLabel">添加奖项</h4>
                </div>
                <form id="validate_form">
                    <div class="bk-form" style="width:900px;padding: 10px" id="validate_form">
                        <input type="hidden" id="award_id" class="bk-form-input">
                        <div class="bk-form-item is-required">
                            <label class="bk-label" style="width:150px;">奖项名称</label>
                            <div class="bk-form-content" style="margin-left:150px;">
                                <input type="text" class="bk-form-input" id="award_name" name="award_name"
                                       placeholder="请输入奖项名称">
                            </div>
                        </div>
                        <div class="bk-form-item is-required">
                            <label class="bk-label" style="width:150px;">评奖条件</label>
                            <div class="bk-form-content" style="margin-left:150px;">
                                <div id="editor4_demo1">
                                    <div id="myEditor" style="width:730px;height:400px;" name="myEditor">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="bk-form-item is-required">
                            <label class="bk-label" style="width:150px;">奖项级别</label>
                            <div class="bk-form-content" style="margin-left:150px;">
                                <select name="" id="award_level" class="bk-form-select">
                                    <option value=1>中心级</option>
                                    <option value=2>部门级</option>
                                    <option value=3>普照奖</option>
                                </select>
                            </div>
                        </div>
                        <div class="bk-form-item is-required">
                            <label class="bk-label" style="width:150px;">所属组织</label>
                            <div class="plugin3_demo" id="plugin3_demo3" style="display:inline-block;">
                                <!-- select2 通过ajax start -->
                                <div class="select2-container select2_box select2-container-active" id="s2id_autogen5"
                                     style="width:730px;">
                                    <a href="javascript:void(0)" class="select2-choice" tabindex="-1"><abbr
                                            class="select2-search-choice-close"></abbr> <span class="select2-arrow"
                                                                                              role="presentation"><b
                                            role="presentation"></b></span></a>
                                    <label for="belonging_org" class="select2-offscreen"></label>
                                    <input class="select2-focusser select2-offscreen" type="text" aria-haspopup="true"
                                           role="button" aria-labelledby="select2-chosen-6">
                                </div>
                                <input type="hidden" class="select2_box bk-form-input"
                                       style="width: 450px; display: none;"
                                       tabindex="-1"
                                       title="" value="" id="belonging_org">
                                <!-- select2 通过ajax end -->
                            </div>
                        </div>
                        <div class="bk-form-item is-required">
                            <label class="bk-label" style="width:150px;">开始日期</label>
                            <div class="bk-form-content" style="margin-left:150px;">
                                <input type="text" class="bk-form-input daterangepicker_demo" id="start_datetime"
                                       placeholder="选择日期..." name="start_datetime">
                            </div>
                        </div>
                        <div class="bk-form-item is-required">
                            <label class="bk-label" style="width:150px;">结束日期</label>
                            <div class="bk-form-content" style="margin-left:150px;">
                                <input type="text" class="bk-form-input daterangepicker_demo" id="end_datetime"
                                       name="end_datetime" placeholder="选择日期...">
                            </div>
                        </div>
                        <div class="bk-form-item is-required">
                            <label class="bk-label" style="width:150px;">上传附件</label>
                            <div class="bk-form-content" style="margin-left:150px;">
                                <input type="checkbox" checked="checked" id="need_attachment" name="need_attachment">
                            </div>
                        </div>
                        <div class="bk-form-item is-required">
                            <label class="bk-label" style="width:150px;">状态</label>
                            <div class="bk-form-content" style="margin-left:150px;">
                                <input type="checkbox" checked="checked" id="status">
                            </div>
                        </div>
                    </div>
                </form>
                <div class="modal-footer">
                    <button type="button" class="bk-button bk-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="bk-button bk-primary" onclick="saveAward()">提交</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>

    <div class="modal fade" id="displayModal" tabindex="1" role="dialog" aria-labelledby="displayModalLabel"

         data-backdrop="static">
        <div class="modal-dialog" style="width: 680px;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="displayModalLabel">查看奖项</h4>
                </div>
                <div class="bk-form" style="width:900px;padding: 10px">
                    <div class="bk-form-item">
                        <label class="bk-label" style="width:150px;">奖项名称：</label>
                        <div class="bk-form-content" style="margin-left:150px;">
                            <p class="bk-label" id="display_award_name"></p>
                        </div>
                    </div>
                    <div class="bk-form-item">
                        <label class="bk-label" style="width:150px;">评奖条件：</label>
                        <div class="bk-form-content" style="margin-left:150px;">
                            <p class="bk-label" id="display_requirement"></p>
                        </div>
                    </div>
                    <div class="bk-form-item">
                        <label class="bk-label" style="width:150px;">奖项级别：</label>
                        <div class="bk-form-content" style="margin-left:150px;">
                            <p class="bk-label" id="display_award_level"></p>
                        </div>
                    </div>
                    <div class="bk-form-item">
                        <label class="bk-label" style="width:150px;">所属组织：</label>
                        <div class="bk-form-content" style="margin-left:150px;">
                            <p class="bk-label" id="display_belonging_org"></p>
                        </div>
                    </div>
                    <div class="bk-form-item">
                        <label class="bk-label" style="width:150px;">开始时间：</label>
                        <div class="bk-form-content" style="margin-left:150px;">
                            <p class="bk-label" id="display_start_datetime" name="display_start_datetime"></p>
                        </div>
                    </div>
                    <div class="bk-form-item">
                        <label class="bk-label" style="width:150px;">结束时间：</label>
                        <div class="bk-form-content" style="margin-left:150px;">
                            <p class="bk-label" id="display_end_datetime" name="display_end_datetime"></p>
                        </div>
                    </div>
                    <div class="bk-form-item">
                        <label class="bk-label" style="width:150px;">是否需要附件：</label>
                        <div class="bk-form-content" style="margin-left:150px;">
                            <p class="bk-label" id="display_need_attachment"></p>
                        </div>
                    </div>
                    <div class="bk-form-item">
                        <label class="bk-label" style="width:150px;">奖项状态：</label>
                        <div class="bk-form-content" style="margin-left:150px;">
                            <p class="bk-label" id="display_status"></p>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="bk-button bk-default" data-dismiss="modal">关闭</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>


{% endblock %}

{% block extra_block %}
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/daterangepicker-2.0.5/moment.min.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/daterangepicker-2.0.5/daterangepicker.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/umeditor-1.2.2/umeditor.config.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/umeditor-1.2.2/umeditor.min.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/umeditor-1.2.2/lang/zh-cn/zh-cn.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/select2-3.5.2/select2.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/bkSwitcher-1.0/js/bkSwitcher.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/validate-1.14.0/js/jquery.validate.js"></script>
    <script>

        $('#need_attachment').bkSwitcher({
            size: 'large'
        });


        $('#status').bkSwitcher({
            size: 'large'
        });
        //editor4_demo1_js_start
        var editor = UM.getEditor('myEditor');

        //editor4_demo1_js_end

        // 选择单个日期
        $('#search_apply_time').daterangepicker({
            locale: {
                format: 'YYYY-MM-DD'
            },
            autoApply: false, //选择日期后自动设置值
            autoUpdateInput: true,
            singleDatePicker: true //单选选择一个日期
        });
        $('#search_apply_time').val('')
        $('#start_datetime').daterangepicker({
            locale: {
                format: 'YYYY-MM-DD'
            },
            autoApply: false, //选择日期后自动设置值
            singleDatePicker: true //单选选择一个日期
        });
        $('#end_datetime').daterangepicker({
            locale: {
                format: 'YYYY-MM-DD'
            },
            autoApply: false, //选择日期后自动设置值
            drops: "up",
            singleDatePicker: true //单选选择一个日期
        });
        //表格(DataTables)
        var language = {
            search: "{% trans '搜索：' %}",
            lengthMenu: "{% trans '每页显示 _MENU_ 记录' %}",
            zeroRecords: "{% trans '没找到相应的数据！' %}",
            info: "{% trans '分页 _PAGE_ / _PAGES_ 共 _TOTAL_ 条' %}",
            infoEmpty: "{% trans '暂无数据！' %}",
            infoFiltered: "{% trans '(从 _MAX_ 条数据中搜索)' %}",
            paginate: {
                first: "{% trans '首页' %}",
                last: "{% trans '尾页' %}",
                previous: "{% trans '上一页' %}",
                next: "{% trans '下一页' %}",
            }
        }
        var awardTable = $('#award').DataTable({
            sProcessing: '<img alt="loadding" src="https://magicbox.bk.tencent.com/static_api/v3/components/loading1/images/loading_2_36x36.gif">',//这里很重要，如果你的加载中是文字，则直接写上文字即可，如果是gif的图片，使用img标签就可以加载
            pagingType: "full_numbers",
            paging: true, //隐藏分页
            ordering: false, //关闭排序
            info: true, //隐藏左下角分页信息
            searching: false, //关闭搜索
            pageLength: 10, //每页显示几条数据
            lengthChange: false, //不允许用户改变表格每页显示的记录数
            language: language, //汉化
            serverSide: true,
            lengthMenu: [5, 10, 25, 50, 75, 100],
            ajax: {
                url: '{{SITE_URL}}get_award_list/',
                method: "post",
                dataType: 'json',
                data: function (d) {
                    d.search_award_name = $('#search_award_name').val();
                    d.search_org_name = $('#search_org_name').val();
                    d.search_status = $('#search_status  option:selected').val();
                    d.search_apply_time = $('#search_apply_time').val();
                    d.csrfmiddlewaretoken = "{{ csrf_token }}";
                },
                dataSrc: function (json) {
                    json.draw = json.data.info.draw;
                    json.recordsTotal = json.data.info.recordsTotal;
                    json.recordsFiltered = json.data.info.recordsFiltered;
                    json.data = json.data.info.data

                    return json.data;
                },
            },
            columnDefs: [
                {
                    targets: 0,
                    data: "belonging_org",
                },
                {
                    targets: 1,
                    data: "award_level",
                },
                {
                    targets: 2,
                    data: "award_name",
                },
                {
                    targets: 3,
                    data: "status",
                    render: function (data, type, row, meta) {
                        if (data === 1) {
                            return "<span class=\"bk-tag is-fill bk-success\">开启</span>";
                        } else if (data === 0) {
                            return "<span class=\"bk-tag is-fill bk-danger\">结束</span>"
                        } else {
                            return "<span class=\"bk-tag is-fill bk-default\">不限</span>"
                        }
                    }
                },
                {
                    targets: 4,
                    data: "start_time",
                },
                {
                    targets: 5,
                    data: "end_time",
                },
                {
                    targets: 6,
                    data: "apply_person_num",
                },
                {
                    targets: 7,
                    data: "award_person_num",
                },
                {
                    targets: 8,
                    data: "id",
                    render: function (data, type, row, meta) {
                        return '                     <a class="bk-icon-button bk-success bk-button-mini" onclick="displayAwardModal(' + data + ')" data-toggle="modal" data-target="#displayModal">\n' +
                            '                                <i class="bk-icon icon-search bk-icon"></i>\n' +
                            '                                <i class="bk-text">查看</i>\n' +
                            '                            </a>\n' +
                            '                            <a class="bk-icon-button bk-warning bk-button-mini" onclick="editAwardForm(' + data + ')" title="编辑">\n' +
                            '                                <i class="bk-icon icon-file bk-icon"></i>\n' +
                            '                                <i class="bk-text">编辑</i>\n' +
                            '                            </a>\n' +
                            {#'                            <a class="bk-icon-button bk-warning bk-button-mini" title="克隆">\n' +#}
                            {#'                                <i class="bk-icon icon-edit bk-icon"></i>\n' +#}
                            {#'                                <i class="bk-text">克隆</i>\n' +#}
                            {#'                            </a>\n' +#}
                            '                            <a class="bk-icon-button bk-danger bk-button-mini" title="关闭" onclick="deleteAward(' + data + ')">\n' +
                            '                                <i class="bk-icon icon-close bk-icon"></i>\n' +
                            '                                <i class="bk-text">删除</i>\n' +
                            '                            </a>';
                    }
                },
            ]
        });

        function search() {
            awardTable.ajax.reload(null, false);
        }

        function resetSearch() {
            $('#search_award_name').val("");
            $('#search_org_name').val("");
            $('#search_status').val(-1);
            $('#search_apply_time').val("");
            awardTable.ajax.reload(null, false);
        }


        $("#plugin3_demo3 .select2_box").select2({
            ajax: {
                url: "{{ SITE_URL }}get_org_select_data",
                cache: false,
                //对返回的数据进行处理
                results: function (data) {
                    return data.data;
                }
            }

        });

        $('#validate_form').validate({
            ignore: '.ignore',
            errorElement: 'div', //错误信息的容器
            errorClass: 'is-danger',
            errorPlacement: function (error, element) {
                error.addClass('bk-form-tip').insertAfter(element)
            },
            validClass: "bk-valid",
            //验证规则
            rules: {
                award_name: {
                    required: true,
                },
                award_level: {
                    required: true,
                },
                start_datetime: {
                    required: true,
                },
                end_datetime: {
                    required: true,
                }
            },
            //错误提示信息
            messages: {
                award_name: "<p class='bk-tip-text'>奖项名称为必填项！</p>  ",
                award_level: "<p class='bk-tip-text'>请选择奖项级别！</p>  ",
                start_datetime: "<p class='bk-tip-text'>开始日期为必填项！</p>  ",
                end_datetime: "<p class='bk-tip-text'>结束日期为必填项！</p>  ",
            }
        });

        function saveAward() {
            let start_datetime = $('#start_datetime').val() + " 00:00:00"
            let end_datetime = $('#end_datetime').val() + " 23:59:59"
            if (!editor.getContent()) {
                new bkMessage({
                    message: "请输入评讲条件",
                    theme: 'error',
                    delay: 3000
                });
                return false
            }
            if (!$('#s2id_autogen5').val()) {
                new bkMessage({
                    message: "请选择所属组织",
                    theme: 'error',
                    delay: 3000
                });
                return false
            }
            if (start_datetime >= end_datetime) {
                new bkMessage({
                    message: "结束日期不能小于起始日期",
                    theme: 'error',
                    delay: 3000
                });
                return false
            }
            var switcher_attachment = $('#need_attachment').data('bkSwitcher');
            var switcher_status = $('#status').data('bkSwitcher');

            if ($('#validate_form').valid()) {
                $.ajax({
                    url: '{{ SITE_URL }}save_award_info/',
                    method: 'post',
                    data: {
                        'award_name': $("#award_name").val(),
                        'requirement': editor.getContent(),
                        'award_level': $('#award_level').val(),
                        'belonging_org': $('#s2id_autogen5').val(),
                        'start_datetime': start_datetime,
                        'end_datetime': end_datetime,
                        'need_attachment': switcher_attachment.getStatus(),
                        'status': switcher_status.getStatus(),
                        'award_id': $('#award_id').val(),
                        'csrfmiddlewaretoken': "{{ csrf_token }}"
                    },
                    success: function (response) {
                        if (response['result']) {
                            new bkMessage({
                                message: response['message'],
                                theme: 'success'
                            })
                            $('#myModal').modal('hide')
                            awardTable.ajax.reload(null, false)
                        } else {
                            // 失败处理
                            new bkMessage({
                                message: response['message'],
                                theme: 'error',
                                delay: 3000
                            });
                            $('#myModal').modal('hide')
                            awardTable.ajax.reload(null, false)
                        }
                    }
                })
            }
        }

        $('#myModal').on('hide.bs.modal', function () {
            document.getElementById("validate_form").reset();
            $("#validate_form").validate().resetForm();
            $("#award_name").val("");
            editor.setContent("");
            $('#award_level').val(1);
            $("#plugin3_demo3 .select2_box").select2("val", "")
            $('#start_datetime').val("")
            $('#end_datetime').val("")
            var active = true;
            var switcher = $('#need_attachment').data('bkSwitcher');
            switcher.setStatus(active);
            var switcher = $('#status').data('bkSwitcher');
            switcher.setStatus(active);
            $('#award_id').val();
        });

        function editAwardForm(id) {
            $.ajax({
                url: '{{ SITE_URL }}get_award_info/' + id,
                method: 'get',
                success: function (response) {
                    if (response['result']) {
                        $("#myModalLabel").text("修改奖项信息");
                        $('#myModal').modal('show');
                        $("#award_id").val(response.data.info.data.id);
                        $("#award_name").val(response.data.info.data.award_name);
                        editor.setContent(response.data.info.data.requirement)
                        $('#award_level').val(response.data.info.data.award_level);
                        $('#start_datetime').val(response.data.info.data.start_time);
                        $('#end_datetime').val(response.data.info.data.end_time);
                        $("#plugin3_demo2 .select2_box").select2('val', response.data.info.data.display_belonging_org)

                        var switcher = $('#need_attachment').data('bkSwitcher');
                        switcher.setStatus(response.data.info.data.need_attachment);
                        var switcher = $('#status').data('bkSwitcher');
                        switcher.setStatus(response.data.info.data.status);
                        $('#award_id').val(response.data.info.data.id);

                    } else {
                        // 失败处理
                        new bkMessage({
                            message: response['message'],
                            theme: 'error',
                            delay: 3000
                        });
                    }
                }
            })
        }

        function displayAwardModal(id) {
            $.ajax({
                url: '{{ SITE_URL }}get_award_display_info/' + id,
                method: 'get',
                success: function (response) {
                    if (response['result']) {
                        $("#display_award_name").html(response.data.info.data.award_name);
                        $("#display_requirement").html(response.data.info.data.requirement);
                        $("#display_award_level").html(response.data.info.data.award_level);
                        $("#display_belonging_org").html(response.data.info.data.belonging_org);
                        $("#display_start_datetime").html(response.data.info.data.start_time);
                        $("#display_end_datetime").html(response.data.info.data.end_time);
                        $("#display_need_attachment").html(response.data.info.data.need_attachment);
                        $("#display_status").html(response.data.info.data.status);
                    } else {
                        // 失败处理
                        new bkMessage({
                            message: response['message'],
                            theme: 'error',
                            delay: 3000
                        });
                    }
                }
            })
        }

        function deleteAward(id) {
            var dialog = new bkDialog({
                type: 'dialog',
                title: '删除',
                content: '确认删除该条数据？',
                confirmFn: function () {
                    $.ajax({
                        url: '{{ SITE_URL }}delete_award_info/' + id,
                        method: 'get',
                        success: function (response) {
                            if (response['result']) {
                                new bkMessage({
                                    message: response['message'],
                                    theme: 'success'
                                })
                                awardTable.ajax.reload(null, false)
                            } else {
                                // 失败处理
                                new bkMessage({
                                    message: response['message'],
                                    theme: 'error',
                                    delay: 3000
                                });
                            }
                        }
                    })
                }
            });
            dialog.show();
        }

        function batchCopy() {
            search_award_name = $('#search_award_name').val();
            search_org_name = $('#search_org_name').val();
            search_status = $('#search_status  option:selected').val();
            search_apply_time = $('#search_apply_time').val();

            window.location.href = "{{ SITE_URL }}batch_copy/?award_name=" +
                search_award_name + "&org_name=" + search_org_name + "&status=" + search_status + "&apply_time=" + search_apply_time
        }
    </script>
{% endblock %}
